@use 'colors';
@use 'z-index';
@use 'colorMap' as *;

$header_shadow:
	0 4px 5px 0 colors.$black-14,
	0 1px 10px 0 colors.$black-12,
	0 2px 4px -1px colors.$black-20;
$header_height: 64px;
$small_header_height: 48px;
$button_height: 36px;
$button_hover_transition: background-color 0.15s;

.GeoGebraFrame {

	.headerView {
		display: flex;
		align-items: center;
		height: $header_height;
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: white;
		box-shadow: $header_shadow;
		z-index: z-index.$z-open-file-view-header;
		
		.headerBackButton {
			margin: auto 18px;

			.gwt-Image {
				vertical-align: middle;
			}
		}
		.headerCaption {
			display: inline-block;
			font-size: 125%;
			vertical-align: middle;
			letter-spacing: 0.25px;
			margin-right: 24px;
			line-height: $header_height;
		}
		> .headerCaption:first-child {
			margin-left: 16px;
		}

		.signIn {
			text-transform: uppercase;
			margin: 16px 24px 16px 24px;
			padding: 4px 8px;
			line-height: 24px;
			min-width: fit-content;
			border-radius: 2px;
			cursor: pointer;
			color: neutral(900);
			background: transparent;
			transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);

			&:hover{
				background-color: neutral(200);
			}
		}

		.examInfoBtn {
			right: 0;
			position: absolute;
			margin: 14px 18px;
		}

		.examTimer {
			right: 72px;
			position: absolute;
			font-size: 20px;
			margin: 20px 0px;
		}
	}

	.headerView .signInIcon {
		margin: 0 18px;
	}

	%compactHeaderViewShared {
		.headerBackButton {
			vertical-align: middle;
			padding: 8px 8px;
			margin: auto 4px;
		}
		.headerCaption {
			margin: 0 24px 0 0;
		}
	}

	.smallHeaderView {
		@extend %compactHeaderViewShared;
		height: $small_header_height;
		.headerCaption {
			line-height: $small_header_height;
		}
		.headerBackButton {
			height: 40px;
			margin-left: 8px;
			margin-right: 16px;
		}

		.profilePanel {
        	width: 40px;
        	height: 40px;

       		.imageHolder {
        		width: 40px;
        		height: 40px;

        		.profileImage {
        			width: 32px;
        			height: 32px;
        		}
        	}
        }

		.examTimer {
			margin: 12px 0;
		}

		.examInfoBtn {
			margin: 6px 18px;
		}
	}

	.droppedHeaderView {
		box-shadow: none;
	}

	.compactHeaderView {
		@extend %compactHeaderViewShared;
		.headerCaption {
			font-size: 112.5%;
		}
		.headerBackButton {
			height: 40px;
			margin: auto 8px;
		}
	}
}
